<template>
    <el-upload
        drag
        :action="uploadImageAction"
        multiple
        :headers="{
            token,
        }"
        name="img"
        :data="data"
        :on-success="uploadSuccess"
        :on-error="uploadError"
    >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
        <template #tip>
            <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
        </template>
    </el-upload>
</template>
<script setup>
import { uploadImageAction } from '~/api/image'
import { getToken } from '~/composables/auth'
import { toast } from '~/composables/util'
const token = getToken()

defineProps({
    data: {
        type: Object,
        default: () => {},
    },
})

const emit = defineEmits(['success'])

const uploadSuccess = (response, uploadFile, uploadFiles) => {
    emit('success', {
        response,
        uploadFile,
        uploadFiles,
    })
}

const uploadError = (error, uploadFile, uploadFiles) => {
    let msg = JSON.parse(error.message).msg || '上传失败'
    toast(msg, 'error')
}
</script>
